<!DOCTYPE html>
<html lang="zh-CN" class="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 导航页设计稿</title>
    <!-- 引入 Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 配置 Tailwind CSS 以支持深色模式切换 -->
    <script>
      tailwind.config = {
        darkMode: "class", // 启用基于 class 的深色模式
        theme: {
          extend: {
            fontFamily: {
              sans: ["Inter", "sans-serif"], // 使用 Inter 字体
            },
            colors: {
              // 定义自定义颜色变量，方便深色模式切换
              "bg-light": "#f3f4f6", // 浅色背景
              "bg-dark": "#1a202c", // 深色背景
              "card-light": "#ffffff", // 浅色卡片背景
              "card-dark": "#2d3748", // 深色卡片背景
              "text-light": "#1f2937", // 浅色文字
              "text-dark": "#edf2f7", // 深色文字
              "subtext-light": "#6b7280", // 浅色副标题文字
              "subtext-dark": "#a0aec0", // 深色副标题文字
              "primary-500": "#3b82f6", // 主要蓝色
              "primary-600": "#2563eb", // 主要深蓝色
            },
          },
        },
      };
    </script>
    <!-- 引入 Lucide Icons for nice SVG icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
  </head>
  <body
    class="font-sans min-h-screen transition-colors duration-300"
    onload="initTheme()"
  >
    <!-- 主容器 -->
    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
      <!-- 头部区域 -->
      <header
        class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4"
      >
        <h1
          class="text-4xl font-extrabold text-text-light dark:text-text-dark transition-colors duration-300"
        >
          Vue 导航
        </h1>
        <!-- 深色模式切换按钮 -->
        <button
          id="theme-toggle"
          class="p-2 rounded-full bg-card-light dark:bg-card-dark text-text-light dark:text-text-dark shadow-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
        >
          <svg
            id="moon-icon"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-moon hidden"
          >
            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
          </svg>
          <svg
            id="sun-icon"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sun hidden"
          >
            <circle cx="12" cy="12" r="4" />
            <path d="M12 2v2" />
            <path d="M12 20v2" />
            <path d="m4.93 4.93 1.41 1.41" />
            <path d="m17.66 17.66 1.41 1.41" />
            <path d="M2 12h2" />
            <path d="M20 12h2" />
            <path d="m6.34 17.66-1.41 1.41" />
            <path d="m19.07 4.93-1.41 1.41" />
          </svg>
        </button>
      </header>

      <!-- 搜索框 -->
      <div class="mb-8 relative">
        <input
          type="text"
          placeholder="搜索你想要的资源..."
          class="w-full p-4 pl-12 rounded-lg bg-card-light dark:bg-card-dark text-text-light dark:text-text-dark border border-gray-300 dark:border-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors duration-300"
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-search absolute left-4 top-1/2 -translate-y-1/2 text-subtext-light dark:text-subtext-dark"
        >
          <circle cx="11" cy="11" r="8" />
          <path d="m21 21-4.3-4.3" />
        </svg>
      </div>

      <!-- 分类/标签区域 -->
      <div class="mb-8">
        <h2
          class="text-2xl font-bold mb-4 text-text-light dark:text-text-dark transition-colors duration-300"
        >
          热门分类
        </h2>
        <div class="flex flex-wrap gap-3">
          <button
            class="px-4 py-2 rounded-full bg-primary-500 text-white shadow-md hover:bg-primary-600 transition-all duration-200"
          >
            前端框架
          </button>
          <button
            class="px-4 py-2 rounded-full bg-card-light dark:bg-card-dark text-subtext-light dark:text-subtext-dark border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
          >
            UI 组件库
          </button>
          <button
            class="px-4 py-2 rounded-full bg-card-light dark:bg-card-dark text-subtext-light dark:text-subtext-dark border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
          >
            工具库
          </button>
          <button
            class="px-4 py-2 rounded-full bg-card-light dark:bg-card-dark text-subtext-light dark:text-subtext-dark border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
          >
            学习资源
          </button>
          <button
            class="px-4 py-2 rounded-full bg-card-light dark:bg-card-dark text-subtext-light dark:text-subtext-dark border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
          >
            状态管理
          </button>
        </div>
      </div>

      <!-- 导航项列表 -->
      <div>
        <h2
          class="text-2xl font-bold mb-4 text-text-light dark:text-text-dark transition-colors duration-300"
        >
          所有资源
        </h2>
        <div
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
        >
          <!-- 导航卡片示例 1 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-200 mr-4"
              >
                <!-- Vue Icon from Lucide -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-vue"
                >
                  <path d="M16.5 4L12 12 7.5 4 3 12 12 20 21 12z" />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Vue.js 官方文档
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              Vue.js 核心库的官方文档，全面且详细，是学习 Vue 的最佳起点。
            </p>
          </a>

          <!-- 导航卡片示例 2 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-200 mr-4"
              >
                <!-- Pin Icon from Lucide -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-pin"
                >
                  <path d="M12 17v-8" />
                  <path d="m15 10-3-3-3 3" />
                  <path
                    d="M19 10c0 4.1-3.6 7.5-8 7.5S3 14.1 3 10a7.5 7.5 0 0 1 15 0Z"
                  />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Pinia 状态管理
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              Vue 官方推荐的状态管理库，轻量、灵活、易于学习。
            </p>
          </a>

          <!-- 导航卡片示例 3 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-red-100 dark:bg-red-800 text-red-600 dark:text-red-200 mr-4"
              >
                <!-- Router Icon from Lucide (using 'route') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-route"
                >
                  <path d="M3 12h6l4 8 4-16h6" />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Vue Router
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              Vue.js 的官方路由管理器，用于构建单页应用。
            </p>
          </a>

          <!-- 导航卡片示例 4 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-200 mr-4"
              >
                <!-- Component Icon from Lucide (using 'blocks') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-blocks"
                >
                  <rect width="7" height="7" x="14" y="3" rx="1" />
                  <rect width="7" height="7" x="3" y="14" rx="1" />
                  <path d="M7 7h.01" />
                  <path d="M14 14h.01" />
                  <path d="M7 17h.01" />
                  <path d="M17 7h.01" />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Element Plus UI
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              一套基于 Vue 3 的桌面端组件库，提供丰富的 UI 组件。
            </p>
          </a>

          <!-- 导航卡片示例 5 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-600 dark:text-yellow-200 mr-4"
              >
                <!-- Tool Icon from Lucide (using 'tool') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-tool"
                >
                  <path
                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.77 3.77Z"
                  />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Vite 构建工具
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              下一代前端开发与构建工具，为 Vue 等框架提供极速开发体验。
            </p>
          </a>

          <!-- 导航卡片示例 6 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-indigo-100 dark:bg-indigo-800 text-indigo-600 dark:text-indigo-200 mr-4"
              >
                <!-- Docs Icon from Lucide (using 'book') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-book"
                >
                  <path
                    d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"
                  />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Nuxt.js
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              一个直观的 Vue 框架，用于构建全栈 Web 应用、静态站点等。
            </p>
          </a>

          <!-- 导航卡片示例 7 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-200 mr-4"
              >
                <!-- Extension Icon from Lucide (using 'plug-zap') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-plug-zap"
                >
                  <path d="M13 2v8h6L11 22v-8H5l8-12z" />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Vue Devtools
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              Vue.js 调试工具，浏览器扩展，可帮助您调试 Vue 应用。
            </p>
          </a>

          <!-- 导航卡片示例 8 -->
          <a
            href="#"
            class="block p-6 rounded-lg bg-card-light dark:bg-card-dark shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 border border-gray-200 dark:border-gray-700"
          >
            <div class="flex items-center mb-4">
              <div
                class="p-3 rounded-full bg-teal-100 dark:bg-teal-800 text-teal-600 dark:text-teal-200 mr-4"
              >
                <!-- Globe Icon from Lucide (using 'globe') -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-globe"
                >
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
                  <path d="M2 12h20" />
                </svg>
              </div>
              <h3
                class="text-xl font-semibold text-text-light dark:text-text-dark"
              >
                Axios HTTP 客户端
              </h3>
            </div>
            <p class="text-subtext-light dark:text-subtext-dark text-base">
              一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。
            </p>
          </a>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer
      class="mt-12 py-6 text-center text-subtext-light dark:text-subtext-dark text-sm border-t border-gray-200 dark:border-gray-700 transition-colors duration-300"
    >
      <p>&copy; 2025 Vue 导航页. 保留所有权利。</p>
    </footer>

    <!-- JavaScript for Theme Toggle -->
    <script>
      const themeToggleBtn = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;
      const moonIcon = document.getElementById("moon-icon");
      const sunIcon = document.getElementById("sun-icon");

      /**
       * Initializes the theme based on local storage or system preference.
       */
      function initTheme() {
        const savedTheme = localStorage.getItem("theme");
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)"
        ).matches;

        if (savedTheme) {
          // If a theme is saved, apply it
          if (savedTheme === "dark") {
            htmlElement.classList.add("dark");
            moonIcon.classList.remove("hidden");
            sunIcon.classList.add("hidden");
          } else {
            htmlElement.classList.remove("dark");
            moonIcon.classList.add("hidden");
            sunIcon.classList.remove("hidden");
          }
        } else if (prefersDark) {
          // If no theme is saved, check system preference
          htmlElement.classList.add("dark");
          moonIcon.classList.remove("hidden");
          sunIcon.classList.add("hidden");
        } else {
          // Default to light theme
          htmlElement.classList.remove("dark");
          moonIcon.classList.add("hidden");
          sunIcon.classList.remove("hidden");
        }

        // Set the background color of the body based on the current theme
        document.body.classList.remove("bg-bg-light", "bg-bg-dark"); // Remove existing
        if (htmlElement.classList.contains("dark")) {
          document.body.classList.add("bg-bg-dark");
        } else {
          document.body.classList.add("bg-bg-light");
        }
      }

      // Add event listener for theme toggle button
      themeToggleBtn.addEventListener("click", () => {
        if (htmlElement.classList.contains("dark")) {
          // Switch to light mode
          htmlElement.classList.remove("dark");
          localStorage.setItem("theme", "light");
          moonIcon.classList.add("hidden");
          sunIcon.classList.remove("hidden");
          document.body.classList.remove("bg-bg-dark");
          document.body.classList.add("bg-bg-light");
        } else {
          // Switch to dark mode
          htmlElement.classList.add("dark");
          localStorage.setItem("theme", "dark");
          moonIcon.classList.remove("hidden");
          sunIcon.classList.add("hidden");
          document.body.classList.remove("bg-bg-light");
          document.body.classList.add("bg-bg-dark");
        }
      });

      // Initialize the theme when the script loads (for immediate application before onload)
      // initTheme(); // Called via onload attribute instead for full DOM readiness
    </script>
  </body>
</html>
